<template>
  <basic-container :btnFlag=true>
    <div class="card-border">
      <card-header :header-data="headerData"></card-header>
      <div class="" v-if="toDoOrnot=='0'" style="float: right;margin: 12px 0px">
        <el-button type="primary" size="medium" @click.stop="commitList()">确 定</el-button>
        <el-button type="info" size="medium" @click.stop="goBack()">关 闭</el-button>
      </div>
      <el-form
        label-width="130px"
        :model="endSubjectForm"
        style="padding-right: 30px;margin-top: 40px;margin-left: 48px;font-weight: 600"
        :rules="endSubjectFormrules"
        ref="endSubjectForm"
      >
        <el-form-item class="form-item" label="结题意见 :" prop="approved">
          <el-radio-group v-model="endSubjectForm.approved" style="margin-left: 10px;">
            <el-radio :label="1">同意</el-radio>
            <el-radio :label="0">不同意</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item class="form-item" label="" prop="opinion">
          <el-input
            v-if="opcontent"
            style="margin-top: -10px;width: 30%;"
            required="required"
            type="textarea"
            :rows="3"
            v-model="endSubjectForm.opinion"
            placeholder="退回理由:"
          ></el-input>
        </el-form-item>
      </el-form>

      <div class="form-group form-padding" style="margin-bottom: 2rem;margin-top: 1rem;padding-left: 82px;"
           v-if="toDoOrnot=='0'">
        <span class="form-label-small" style="float: left;margin-right: -29px;font-weight: 600">附件 :</span>
        <el-upload
          style="margin-top: 6px;margin-left: 70px;"
          class="upload-demo"
          ref="uploadrelated"
          action="string"
          :http-request="submitUploadMixin"
          :on-preview="handlePreviewMixin"
          :on-remove="handleRemoveMixin"
          :file-list="fileListMixin"
          :auto-upload="true"
          :on-change="fileChangeMixin">
          <el-button slot="trigger" size="small" type="primary">点击上传</el-button>
        </el-upload>
      </div>
      <div style="margin-top: 18px;margin-left: 126px;" v-if="toDoOrnot=='1'">
        <p class="" style="float:left;font-weight: 600;margin-bottom: 0px;">附件 ：</p>
        <div v-for="(file,index) in files" :key="index" class="relateddiv">
          <el-tooltip class="item" effect="dark" content="下载资料" placement="top-start">
            <el-button class="downbtn" @click="fileDownload(file.fileId,file.fileName)">
              <img src="img/download-blue.png" class="detail-data-img"/><span>下载</span>
            </el-button>
          </el-tooltip>
          <p class="detail-data-file" v-if="file.fileName">{{file.fileName}}</p>
        </div>
        <p class="detail-data-file" v-if="files.length==0">无</p>
      </div>
      <el-collapse v-model="activeNames" style="margin-top:5rem;">
        <el-collapse-item name="2">
          <template slot="title">
            <div class="card-header collapse-header">
              <div class="head-title collapse-title">课题报告信息</div>
            </div>
          </template>
          <div>
            <table class="bs-table">
              <tr class="bs-table_row">
                <th class="bs-table_th" style="width: 200px">课题名称</th>
                <td class="bs-table_td" colspan="3">{{uploadDetailData.subjectTitle}}</td>
              </tr>
              <tr class="bs-table_row">
                <th class="bs-table_th">上传人</th>
                <td class="bs-table_td" colspan="3">{{uploadDetailData.uploadNickname}}</td>
              </tr>
              <tr class="bs-table_row">
                <th class="bs-table_th">上传说明</th>
                <td class="bs-table_td" colspan="3">{{uploadDetailData.updateReason}}</td>
              </tr>
              <tr class="bs-table_row">
                <th class="bs-table_th">课题成果</th>
                <td class="bs-table_td" colspan="3">
                  <preview :attachementId="uploadDetailData.fileId" v-if="uploadDetailData.fileId"></preview>
                </td>
              </tr>
            </table>
          </div>
        </el-collapse-item>
        <el-collapse-item name="1">
          <template slot="title">
            <div class="card-header collapse-header">
              <div class="head-title collapse-title">申请结题信息</div>
            </div>
          </template>
          <div style="float: right;margin:10px 2px 4px 0px">
            <el-button type="primary" size="mini" @click.stop="resultDetail()">查看规划详情</el-button>
          </div>
          <div>
            <table class="bs-table">
              <tr class="bs-table_row">
                <th class="bs-table_th" style="width: 200px">申请结题主题</th>
                <td class="bs-table_td" colspan="3">{{detailData.title}}</td>
              </tr>
              <tr class="bs-table_row">
                <th class="bs-table_th">申请结题说明</th>
                <td class="bs-table_td" colspan="3">{{detailData.description}}</td>
              </tr>
              <tr class="bs-table_row">
                <th class="bs-table_th">申请时间</th>
                <td class="bs-table_td" colspan="3">{{detailData.applyTime}}</td>
              </tr>
            </table>
          </div>
          <!--<div class="searchDetail" style="margin-left: 9px;margin-top: -38px;">-->
            <!--<bostech-detail :detail-data="detailData"></bostech-detail>-->
          <!--</div>-->
        </el-collapse-item>
      </el-collapse>
    </div>
  </basic-container>
</template>

<script>
  import {subjectlevyFormRules} from "@/const/infoRules";
  import {getEndApplyDetail, endSubjectAgree, endSubjectDisagree, getSubjectReportHistoryList} from "@/api/subject";
  import {resultDetail} from "@/api/planning/result";
  import {getNotNull, getFileTypeFiles} from '@/views/util';
  import relatedfile from "@/mixins/relatedfile";
  import {getfileinfopage, filedownload} from "@/api/system";
  import fileTypeMixin from "@/mixins/fileTypeMixin";

  export default {
    name: "levyFeedback",
    mixins: [relatedfile, fileTypeMixin],
    watch: {
      "endSubjectForm.approved"(val, oldVal) {
        if (val == '1') {
          this.opcontent = false;
          this.endSubjectForm.opinion = '';
        }
        if (val == '0') {
          this.opcontent = true
        }
      },
    },
    created() {
      this.putList();
      this.toDoOrnot = this.$route.query.toDoOrnot;
      this.putTxtDetail();
    },
    mounted() {
      if (this.$route.query.toDoOrnot != undefined && this.$route.query.toDoOrnot == '1') {
        this.putFeedbackForm();
      }
    },
    data() {
      return {
        headerData: {
          title: '结题申请审核'
        },
        toDoOrnot: '1',
        endSubjectForm: {
          opinion: '',
          approved: 1,
          expertFileIds: [],
        },
        opcontent: false,
        detailData: {},
        activeNames: ["1", '2'],
        files: [],
        achievementIdTemp: 0,
        uploadDetailData: {},
        endSubjectFormrules:{}
      }
    },
    methods: {
      // 规划详情跳转
      resultDetail() {
        let src = `/planning/achievement/detail?id=${this.achievementIdTemp}`;
        this.$router.push({
          path: src
        })
      },
      putList() {
        getEndApplyDetail(this.$route.params.id).then(response => {
          let records = response.data.data;
          this.detailData = records;
          this.achievementIdTemp = records.achievementId;
        })
      },
      goBack() {
        this.$router.go(-1)
      },
      commitList() {
        this.$confirm("确定发送意见吗?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          //将多个相关材料的附件id拼成逗号隔开的字符串放在 this.projectForm.fileId 中
          var arr = [];
          for (var item in this.fileListMixin) {
            arr.push(this.fileListMixin[item].url);
          }
          this.endSubjectForm.expertFileIds = arr;


          if (this.endSubjectForm.approved === 1) {
            var submitForm = {
              applyId: this.$route.params.id,
              endSubjectForm: this.endSubjectForm,
            };
            endSubjectAgree(submitForm).then(response => {
              if (response.data.code == 0) {
                this.$notify({
                  title: "成功",
                  message: "发送成功",
                  type: "success",
                  duration: 2000
                });
                this.$router.go(-1)
              }
            })
          } else if (this.endSubjectForm.approved === 0) {
            if (this.endSubjectForm.opinion == '') {
              this.$notify({
                title: '提示',
                message: '请填写理由',
                type: 'warning',
                duration: 2000
              });
              return;
            }
            var submitForm = {
              applyId: this.$route.params.id,
              endSubjectForm: this.endSubjectForm,
            };
            endSubjectDisagree(submitForm).then(response => {
              if (response.data.code == 0) {
                this.$notify({
                  title: "成功",
                  message: "发送成功",
                  type: "success",
                  duration: 2000
                });
                this.$router.go(-1)
              }
            })
          }
        })

      },
      //从已办进入，查看当前部门自己反馈的表单
      putFeedbackForm() {
        getEndApplyDetail(this.$route.params.id).then(async response => {
          var records = response.data.data;
          if (records.state == '1') {            //不同意
            this.endSubjectForm.approved = 0;
            this.endSubjectForm.opinion = records.opinion;
          } else if (records.state == '2') {      //同意
            this.endSubjectForm.approved = 1;
          }
          if (records.expertFileIds != null) {
            if (records.expertFileIds.length != 0) {
              this.files = await getFileTypeFiles(records.expertFileIds);
            }
          }
        })
      },
      //查找最新报告信息
      putTxtDetail() {
        getSubjectReportHistoryList(Object.assign({
          subjectDeptId: this.$route.query.subjectDeptId,
          latest: true,
        })).then(response => {
          var records = response.data.data.records[0];
          this.uploadDetailData = records;
        })
      },


      // 附件下载
      downloadFile(fileId, fileName) {
        filedownload(fileId).then(response => {
          if (response.status == 200) {
            this.download(response.data, fileName)
          }
        }).catch((error) => {
          this.$notify({
            title: "失败",
            message: "上传失败[" + error + "]",
            type: "error",
            duration: 2000
          });
        })
      },
      // 下载文件
      download(data, filename) {
        if (data == null) {

        } else {
          let url = window.URL.createObjectURL(new Blob([data]));
          let link = document.createElement('a');
          link.style.display = 'none';
          link.href = url;
          link.setAttribute('download', filename);
          document.body.appendChild(link);
          link.click()
        }
      },


    },
  }


</script>


<style lang="scss" scoped>
  .relateddiv {
    margin-top: -4px;
    margin-left: 60px;
    margin-bottom: 0px;
  }

  /deep/ .avue-crud__menu {
    min-height: 1px;
  }
</style>


